<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- viewport 移动端特有设置，解决移动端屏幕国小，放不下正常网页的问题 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 当不设置 viewport 时，视口大小默认为 980  -->
    <title>Document</title>
    <script>
      (function () {
        var metaE1 = document.createElement("meta");
        var scale = devicePixelRatio;
        metaE1.setAttribute("name", "viewport");
        metaE1.setAttribute(
          "content",
          "initial-scale" +
            1 / scale +
            ",maximum-scale=" +
            1 / scale +
            ", minimum-scale=" +
            1 / scale +
            ", user-scalable=no"
        );
      })();
    </script>
  </head>
  <body>
    <script>
      // iphone7plus 1920 × 1080像素分辨率
      console.log(window.devicePixelRatio); // 像素比
      // 像素比：原先1px的内容，放大到devicePixelRatio px 显示
    </script>
  </body>
</html>
